import React, { useState } from 'react'
import { Space, Table, Pagination, Button, Input, DatePicker, Tree, } from 'antd';
import {
  DashOutlined
} from '@ant-design/icons';
import ConentHeader from './ConentHeader';
const columns = [
  {
    title: '资料名称',
    dataIndex: 'fileName',
    key: 'fileName',
    align: "center",
    width: "18%",
    fixed: 'left',
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '分类名称',
    dataIndex: 'classificationName',
    key: 'classificationName',
    align: "center",
    fixed: 'left',
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '资料大小',
    dataIndex: 'fileSize',
    key: 'fileSize',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '下载次数',
    dataIndex: 'downloadNum',
    key: 'downloadNum',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '创建人',
    dataIndex: 'creater',
    key: 'creater',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    fixed: 'right',
    align: "center",
    width: "10%",
    render: (text, item) => {
      return <Space>
        <a style={{ fontSize: "12px", }} >下载</a>
      </Space>
    }
  },
];
const data = [
  {
    key: '1',
    fileName: '设备建档用户操作手册.pdf',
    classificationName: "设备新建",
    fileSize: '3.6MB',
    downloadNum: "2",
    creater: "张三",
    createTime: "2023-08-21 13:00:00",
  },

];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
const getRowClassName = (record, index) => {
  let className = '';
  className = index % 2 === 0 ? "oddRow" : "evenRow";
  return className
}
function MaterialManage(props) {
  const { RangePicker } = DatePicker;
  const [selectionType, setSelectionType] = useState('checkbox');
  const treeData = [
    {
      title: <span>全部<span style={{ color: "gray", }}>（2）</span></span>,
      key: '0-0',
    },
    {
      title: '培训资料',
      key: '0-1',
      children: [
        {
          title: <span>终端消缺培训资料<span style={{ color: "gray", }}>（1）</span></span>,
          key: '0-1-0',
          isLeaf: true,
        },
        {
          title: '平板消缺培训资料',
          key: '0-1-1',
          isLeaf: true,
        },
      ],
    },
    {
      title: '运维工具',
      key: '0-2',
      children: [
        {
          title: '平板消缺工具',
          key: '0-2-0',
          isLeaf: true,
        },
      ],
    },
    {
      title: '用户操作手册',
      key: '0-3',
      children: [
        {
          title: '设备运营',
          key: '0-3-0',
          children: [{
            title: <span>设备新建<span style={{ color: "gray", }}>（1）</span></span>,
            key: '0-3-0-0',
            isLeaf: true,
          }]
        },
      ],
    },
  ];
  return (
    <div>
      <ConentHeader />
      <div style={{
        fontSize: "12px", margin: "15px 0 0 0", display: 'flex', minHeight: "500px",
        // height: document.documentElement.clientHeight - 245 
      }}>
        <div style={{ flex: "0 0 250px", padding: "10px", background: "white" }}>
          <Tree
            defaultExpandAll
            defaultSelectedKeys={['0-0']}
            treeData={treeData}
            style={{ fontSize: "12px" }}
          />
        </div>
        <div style={{ flex: "1 1 800px", background: "white", margin: "0 0 0 10px", padding: "10px" }}>
          <Space size={35} style={{ padding: "0 20px 0 20px" }}>
            <div>
              资料名称<Input placeholder="请输入" className='inputValue' />
            </div>
            <div>
              创建时间<RangePicker className='centerInput' placeholder={["开始日期", "结束日期"]} separator="~" style={{ margin: "0 0 0 10px" }} suffixIcon="" />
            </div>
          </Space>
          <Space size={10} style={{ float: "right" }}>
            <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
            <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px" }}>重置</Button>
            <Button style={{ color: "white", background: "#1FBBA9", padding: "4px 9px" }}>批量下载<DashOutlined style={{ borderLeft: "2px solid white", padding: "0 0 0 5px" }} />
            </Button>

          </Space>

          <Table
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            rowClassName={(record, index) => getRowClassName(record, index)}
            columns={columns} dataSource={data} style={{ border: "1px solid #c9cacac7", margin: "15px 0 0 0", }}
            pagination={false}
            size='small'

          >

          </Table>
          <Pagination
            total={100}
            showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
            defaultCurrent={1}
            showSizeChanger={false}
            style={{ margin: "20px 0 0 0", fontSize: "12px" }}
          />

        </div>
      </div>
    </div>
  )
}

export default MaterialManage